<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>密钥管家 - 安全管理您的账号信息</title>
    <link rel="stylesheet" href="assets/css/style.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
</head>
<body>
    <div id="app" class="app-container">
        <!-- 登录页面 -->
        <div v-if="currentPage === 'login'" class="auth-page">
            <div class="auth-container">
                <div class="logo">
                    <h1>密钥管家</h1>
                    <p>安全管理您的账号信息</p>
                </div>
                <form @submit.prevent="login" class="auth-form">
                    <div class="form-group">
                        <label for="username">用户名</label>
                        <input type="text" id="username" v-model="loginForm.username" placeholder="请输入用户名" required>
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <div class="password-input-wrapper">
                            <input :type="loginForm.showPassword ? 'text' : 'password'" id="password" v-model="loginForm.password" placeholder="请输入密码" required>
                            <button type="button" @click="toggleLoginPasswordVisibility" class="toggle-password-btn">
                                {{ loginForm.showPassword ? '隐藏' : '显示' }}
                            </button>
                        </div>
                    </div>
                    <div class="form-options">
                        <label class="remember-me">
                            <input type="checkbox" v-model="loginForm.rememberMe"> 记住我
                        </label>
                        <button type="button" @click="switchTo('forgotPassword')" class="forgot-password">忘记密码？</button>
                    </div>
                    <button type="submit" class="submit-btn" :disabled="isLoading">{{ isLoading ? '登录中...' : '登录' }}</button>
                    <div class="auth-switch">
                        <p>还没有账号？<button type="button" @click="switchTo('register')" class="register-link">立即注册</button></p>
                    </div>
                </form>
                <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
            </div>
        </div>

        <!-- 注册页面 -->
        <div v-else-if="currentPage === 'register'" class="auth-page">
            <div class="auth-container">
                <div class="logo">
                    <h1>创建账号</h1>
                    <p>加入密码管家，安全管理您的账号信息</p>
                </div>
                <form @submit.prevent="register" class="auth-form">
                    <div class="form-group">
                        <label for="reg-username">用户名</label>
                        <input type="text" id="reg-username" v-model="registerForm.username" placeholder="请设置用户名" required>
                    </div>
                    <div class="form-group">
                        <label for="reg-password">密码</label>
                        <div class="password-input-wrapper">
                            <input :type="registerForm.showPassword ? 'text' : 'password'" id="reg-password" v-model="registerForm.password" placeholder="请设置密码" required>
                            <button type="button" @click="toggleRegisterPasswordVisibility" class="toggle-password-btn">
                                {{ registerForm.showPassword ? '隐藏' : '显示' }}
                            </button>
                        </div>
                        <div class="password-strength" :class="passwordStrengthClass">{{ passwordStrengthText }}</div>
                    </div>
                    <div class="form-group">
                        <label for="reg-confirm-password">确认密码</label>
                        <input type="password" id="reg-confirm-password" v-model="registerForm.confirmPassword" placeholder="请再次输入密码" required>
                    </div>
                    <button type="submit" class="submit-btn" :disabled="isLoading">{{ isLoading ? '注册中...' : '注册' }}</button>
                    <div class="auth-switch">
                        <p>已有账号？<button type="button" @click="switchTo('login')" class="login-link">返回登录</button></p>
                    </div>
                </form>
                <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
                <div v-if="successMessage" class="success-message">{{ successMessage }}</div>
            </div>
        </div>

        <!-- 忘记密码页面 -->
        <div v-else-if="currentPage === 'forgotPassword'" class="auth-page">
            <div class="auth-container">
                <div class="logo">
                    <h1>找回密码</h1>
                    <p>请按照提示重置您的密码</p>
                </div>
                <form @submit.prevent="forgotPassword" class="auth-form">
                    <div class="form-group">
                        <label for="forgot-username">用户名</label>
                        <input type="text" id="forgot-username" v-model="forgotForm.username" placeholder="请输入您的用户名" required>
                    </div>
                    <button type="submit" class="submit-btn" :disabled="isLoading">{{ isLoading ? '处理中...' : '提交' }}</button>
                    <div class="auth-switch">
                        <p><button type="button" @click="switchTo('login')" class="back-link">返回登录</button></p>
                    </div>
                </form>
                <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div>
                <div v-if="successMessage" class="success-message">{{ successMessage }}</div>
            </div>
        </div>

        <!-- 主页面 (需要登录后显示) -->
        <div v-else-if="currentPage === 'main'" class="main-page">
            <!-- 顶部导航栏 -->
            <header class="header">
                <div class="header-left">
                    <h1>密码管家</h1>
                </div>
                <div class="header-center">
                    <div class="search-wrapper">
                        <input type="text" v-model="searchQuery" placeholder="搜索账号..." class="search-input">
                        <button @click="searchAccounts" class="search-btn">搜索</button>
                    </div>
                </div>
                <div class="header-right">
                    <button @click="switchTo('settings')" class="settings-btn">设置</button>
                    <button @click="logout" class="logout-btn">退出</button>
                </div>
            </header>

            <!-- 分类列表 -->
            <div class="categories">
                <button 
                    v-for="category in categories" 
                    :key="category.id" 
                    @click="selectCategory(category.id)"
                    :class="['category-btn', { active: selectedCategory === category.id }]"
                >
                    {{ category.name }}
                </button>
            </div>

            <!-- 账号列表 -->
            <div class="accounts-list">
                <div v-if="filteredAccounts.length === 0" class="empty-state">
                    <p>暂无账号信息</p>
                </div>
                <div 
                    v-for="account in filteredAccounts" 
                    :key="account.id" 
                    class="account-item"
                    @click="viewAccountDetail(account.id)"
                >
                    <div class="account-icon">{{ getAccountIcon(account.name) }}</div>
                    <div class="account-info">
                        <h3 class="account-name">{{ account.name }}</h3>
                        <p class="account-username">{{ account.username }}</p>
                    </div>
                    <div class="account-actions">
                        <button @click.stop="editAccount(account.id)" class="edit-btn">编辑</button>
                        <button @click.stop="deleteAccount(account.id)" class="delete-btn">删除</button>
                    </div>
                </div>
            </div>

            <!-- 新增按钮 -->
            <button @click="switchTo('addAccount')" class="add-btn">
                <span>+</span>
            </button>
        </div>

        <!-- 账号详情页 -->
        <div v-else-if="currentPage === 'accountDetail'" class="detail-page">
            <header class="detail-header">
                <button @click="switchTo('main')" class="back-btn">返回</button>
                <h1>账号详情</h1>
                <div class="header-actions">
                    <button @click="editAccount(currentAccount.id)" class="edit-btn">编辑</button>
                    <button @click="deleteAccount(currentAccount.id)" class="delete-btn">删除</button>
                </div>
            </header>
            
            <div class="detail-content" v-if="currentAccount">
                <div class="detail-group">
                    <label>网站/应用名称</label>
                    <p>{{ currentAccount.name }}</p>
                </div>
                <div class="detail-group">
                    <label>网址</label>
                    <a :href="currentAccount.url" target="_blank" class="url-link">{{ currentAccount.url }}</a>
                </div>
                <div class="detail-group">
                    <label>账号</label>
                    <p>{{ currentAccount.username }}</p>
                </div>
                <div class="detail-group">
                    <label>密码</label>
                    <div class="password-display-wrapper">
                        <p>{{ currentAccount.showPassword ? currentAccount.password : '••••••••' }}</p>
                        <button @click="toggleDetailPasswordVisibility" class="toggle-password-btn">
                            {{ currentAccount.showPassword ? '隐藏' : '显示' }}
                        </button>
                    </div>
                </div>
                <div class="detail-group">
                    <label>备注</label>
                    <p>{{ currentAccount.note || '无' }}</p>
                </div>
                <div class="detail-group">
                    <label>创建时间</label>
                    <p>{{ formatDate(currentAccount.createdAt) }}</p>
                </div>
                <div class="detail-group">
                    <label>最后修改</label>
                    <p>{{ formatDate(currentAccount.updatedAt) }}</p>
                </div>
            </div>
        </div>

        <!-- 新增/编辑账号页面 -->
        <div v-else-if="currentPage === 'addAccount' || currentPage === 'editAccount'" class="form-page">
            <header class="form-header">
                <button @click="switchTo('main')" class="back-btn">返回</button>
                <h1>{{ currentPage === 'addAccount' ? '新增账号' : '编辑账号' }}</h1>
                <button @click="generateRandomPassword" class="generate-btn">生成密码</button>
            </header>
            
            <form @submit.prevent="saveAccount" class="account-form">
                <div class="form-group">
                    <label for="account-name">网站/应用名称 *</label>
                    <input type="text" id="account-name" v-model="accountForm.name" placeholder="请输入网站或应用名称" required>
                </div>
                <div class="form-group">
                    <label for="account-url">网址</label>
                    <input type="url" id="account-url" v-model="accountForm.url" placeholder="请输入网址" @input="validateUrl">
                    <div v-if="urlError" class="field-error">{{ urlError }}</div>
                </div>
                <div class="form-group">
                    <label for="account-username">账号 *</label>
                    <input type="text" id="account-username" v-model="accountForm.username" placeholder="请输入账号" required>
                </div>
                <div class="form-group">
                    <label for="account-password">密码 *</label>
                    <div class="password-input-wrapper">
                        <input :type="accountForm.showPassword ? 'text' : 'password'" id="account-password" v-model="accountForm.password" placeholder="请输入密码" required>
                        <button type="button" @click="toggleAccountPasswordVisibility" class="toggle-password-btn">
                            {{ accountForm.showPassword ? '隐藏' : '显示' }}
                        </button>
                    </div>
                </div>
                <div class="form-group">
                    <label for="account-category">分类</label>
                    <select id="account-category" v-model="accountForm.categoryId">
                        <option v-for="category in categories" :key="category.id" :value="category.id">{{ category.name }}</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="account-note">备注</label>
                    <textarea id="account-note" v-model="accountForm.note" placeholder="请输入备注信息" rows="3"></textarea>
                </div>
                <div class="form-actions">
                    <button type="submit" class="save-btn" :disabled="isLoading">{{ isLoading ? '保存中...' : '保存' }}</button>
                    <button type="button" @click="switchTo('main')" class="cancel-btn">取消</button>
                </div>
            </form>
        </div>

        <!-- 设置页面 -->
        <div v-else-if="currentPage === 'settings'" class="settings-page">
            <header class="settings-header">
                <button @click="switchTo('main')" class="back-btn">返回</button>
                <h1>设置</h1>
            </header>
            
            <div class="settings-content">
                <div class="settings-group">
                    <h2>账户设置</h2>
                    <div class="setting-item" @click="showChangePasswordDialog = true">
                        <span>修改密码</span>
                        <span class="arrow">›</span>
                    </div>
                </div>
                
                <div class="settings-group">
                    <h2>数据管理</h2>
                    <div class="setting-item" @click="backupData">
                        <span>备份数据</span>
                        <span class="arrow">›</span>
                    </div>
                    <div class="setting-item" @click="showRestoreDialog = true">
                        <span>恢复数据</span>
                        <span class="arrow">›</span>
                    </div>
                </div>
                
                <div class="settings-group">
                    <h2>安全设置</h2>
                    <div class="setting-item">
                        <span>自动锁定时间</span>
                        <select v-model="autoLockTime">
                            <option value="0">永不</option>
                            <option value="300000">5分钟</option>
                            <option value="600000">10分钟</option>
                            <option value="1800000">30分钟</option>
                            <option value="3600000">1小时</option>
                        </select>
                    </div>
                    <div class="setting-item">
                        <label class="toggle-label">
                            <input type="checkbox" v-model="requirePasswordOnStart">
                            <span class="toggle-text">启动时需要密码验证</span>
                        </label>
                    </div>
                </div>
                
                <div class="settings-group">
                    <h2>关于</h2>
                    <div class="setting-item">
                        <span>版本</span>
                        <span class="version">1.0.0</span>
                    </div>
                    <div class="setting-item" @click="showAboutDialog = true">
                        <span>关于密码管家</span>
                        <span class="arrow">›</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 修改密码对话框 -->
        <div v-if="showChangePasswordDialog" class="modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>修改密码</h3>
                    <button @click="showChangePasswordDialog = false" class="close-btn">×</button>
                </div>
                <form @submit.prevent="changePassword" class="modal-form">
                    <div class="form-group">
                        <label for="current-password">当前密码</label>
                        <input type="password" id="current-password" v-model="changePasswordForm.currentPassword" required>
                    </div>
                    <div class="form-group">
                        <label for="new-password">新密码</label>
                        <input type="password" id="new-password" v-model="changePasswordForm.newPassword" required>
                    </div>
                    <div class="form-group">
                        <label for="confirm-new-password">确认新密码</label>
                        <input type="password" id="confirm-new-password" v-model="changePasswordForm.confirmPassword" required>
                    </div>
                    <div class="modal-actions">
                        <button type="submit" class="confirm-btn" :disabled="isLoading">{{ isLoading ? '修改中...' : '确认修改' }}</button>
                        <button type="button" @click="showChangePasswordDialog = false" class="cancel-btn">取消</button>
                    </div>
                </form>
            </div>
        </div>

        <!-- 生成随机密码对话框 -->
        <div v-if="showGeneratePasswordDialog" class="modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>生成随机密码</h3>
                    <button @click="showGeneratePasswordDialog = false" class="close-btn">×</button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="password-length">密码长度</label>
                        <input type="number" id="password-length" v-model="passwordGenerator.length" min="8" max="50" required>
                    </div>
                    <div class="checkbox-group">
                        <label class="checkbox-label">
                            <input type="checkbox" v-model="passwordGenerator.includeUppercase">
                            <span>包含大写字母</span>
                        </label>
                        <label class="checkbox-label">
                            <input type="checkbox" v-model="passwordGenerator.includeLowercase">
                            <span>包含小写字母</span>
                        </label>
                        <label class="checkbox-label">
                            <input type="checkbox" v-model="passwordGenerator.includeNumbers">
                            <span>包含数字</span>
                        </label>
                        <label class="checkbox-label">
                            <input type="checkbox" v-model="passwordGenerator.includeSymbols">
                            <span>包含特殊符号</span>
                        </label>
                    </div>
                    <div class="generated-password">
                        <input type="text" v-model="generatedPassword" readonly>
                        <button @click="copyGeneratedPassword" class="copy-btn">复制</button>
                    </div>
                </div>
                <div class="modal-actions">
                    <button type="button" @click="applyGeneratedPassword" class="apply-btn">使用此密码</button>
                    <button type="button" @click="regeneratePassword" class="regenerate-btn">重新生成</button>
                </div>
            </div>
        </div>
    </div>

    <script src="assets/js/app.js"></script>
</body>
</html>